<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS3的多列布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #parent{
      /* 
      column-count: 4; 行数   
      column-width: 400px; 宽度  =>width 
      column-gap: 10px;    => margin 间距
      column-rule-color => border-color
      column-rule-style => border-style
      column-rule-width => border-width
      column-rule => border 分割线
      column-span  => table   colspan
      */

      column-count: 4;
      /* column-width: 400px; */
      /* column-gap: 30px; */
      
     /*  column-rule-color:green;
      column-rule-style: double;
      column-rule-width: 10px; */
     
    }
    #parent>div{
      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
            page-break-inside: avoid; /* Firefox */
                 break-inside: avoid; /* IE 10+, Chrome, Safari, Opera */
    }
    .col1{background-color: hotpink;}
    .col2{background-color: blueviolet;}
    .col3{background-color: green;}
    .col4{background-color: yellow;}

    table{
      border-collapse: collapse;
    }

    .col1{
      /* 把所有的列合并成1个大列 - 独占一排 */
      column-span: all;
    }
  </style>
</head>

<body>
  <table border="1">
    <tr align="center">
      <td colspan="4">标题</td>
    </tr>
    <tr>
      <td>姓名</td>
      <td>性别</td>
      <td>年纪</td>
      <td>分数</td>
    </tr>

  </table>
  <!-- 作为父级容器 -->
  <div id="parent">
    <div class="col1">zhufeng</div>
    <div class="col2">Never underestimate your power to change?Whatever is worth doing is worth doing well.Never
      underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to
      change?Whatever is worth doing is worth doing well.</div>
    <div class="col3">Never underestimate your power to change?Whatever is worth doing is worth doing well.Never
      underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to
      change?Whatever is worth doing is worth doing well.
    </div>
    <div class="col4">Never underestimate your power to change?Whatever is worth doing is worth doing well.Never
      underestimate your power to change?Whatever is worth doing is worth doing well.Never underestimate your power to
      change?Whatever is worth doing is worth doing well.</div>
  </div>
</body>

</html>
